<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
	 .cardClass {
		height: 38px;width: 20px;
		background-color: #8BC688;
		border: 2px;
		float:left;
		margin: 2px;
	 }
	 .cardBackClass {
		height: 38px;
		width: 20px;
		background-color: #3366FF;
		border: 2px;
		float:left;
		margin: 2px;
	 }
	 .cardDisableClass {
		height: 38px;
		width: 40px;
		background-color: #C0C0C0;
		border: 2px;
		float:left;
		margin: 2px;
	 }
	 .armClass {
		height: 38px;
		width: 20px;
		background-color: #003300;
		border: 2px;
		float:left;
		margin: 2px;
	 }
	 .currentArmClass {
		height: 60px;
		width: 30px;
		background-color: #003300;
		border: 2px;
		float:left;
		margin: 2px;
	 }
	 .hpClass {
		height: 10px;
		width:  10px;
		border: 2px;
		float:left;
		margin: 2px;
	 }
  </style>
  <!--
  <script type="text/javascript" language="javascript" src="js/common/yahoo-dom-event.js"></script>
  <script type="text/javascript" language="javascript" src="js/common/dragdrop-min.js"></script>
  <script type="text/javascript" language="javascript" src="js/common/connection-min.js"></script>
  <script type="text/javascript" language="javascript" src="js/common/prototype.js"></script>
  <script type="text/javascript" language="javascript" src="js/common/Constants.js"></script>
  <script type="text/javascript" language="javascript" src="js/common/EventBus.js"></script>
  <script type="text/javascript" language="javascript" src="js/common/ComponentManager.js"></script>
  <script type="text/javascript" language="javascript" src="js/common/Utility.js"></script>
  <script type="text/javascript" language="javascript" src="js/common/RequestClient.js"></script>
  <script type="text/javascript" language="javascript" src="js/common/DDManager.js"></script>
  <script type='text/javascript' src='dwr/engine.js'> </script>
  <script type='text/javascript' src='dwr/util.js'> </script>
  <script type='text/javascript' src='dwr/interface/GameCenter.js'> </script>
  <script type="text/javascript" language="javascript" src="js/Room.js"></script>
  <script type="text/javascript" language="javascript" src="js/ObjectCard.js"></script>
  <script type="text/javascript" language="javascript" src="js/CardPlayer.js"></script>
  <script type='text/javascript' src='dwr/interface/RoomService.js'> </script>
	<script language="javascript" type="text/javascript">
		var init = {id: "room_instance"};
		var room = ComponentManager.loadComponent({componentId:'room_instance',
			jsClassName:'Room',initData:init});
		var player = ComponentManager.getComponentById('current_player_instance');
		function outCard(){
			player.okCard();
		}
		function cancelCard(){
			player.cancelCard();
		}
		function doPrepare(obj){
			if(obj.prepareflag == "0"){
				obj.value = "cancel";
				obj.prepareflag = "1";
			}
			else{
				obj.value = "Prepare";
				obj.prepareflag = "0";
			}
		}
		function roomInit(){
			dwr.engine.setActiveReverseAjax(true);
			GameCenter.initRoomMainPage();
		}
	</script>
	-->
 </HEAD>


 <BODY onload="dwr.engine.setActiveReverseAjax(true);">
	<table border="0" style="border: 0px solid red;width: 100%;overflow: auto;float: left;table-layout: fixed" >
		<tr>
			<td id="user7_area"  width="20%">
			</td>
			<td id="user6_area"  width="20%">
			</td>
			<td id="user5_area"  width="20%">
			</td>
			<td id="user4_area"  width="20%">
			</td>
			<td id="user3_area"  width="20%">
			</td>
		</tr>
		<tr>
			<td id="user8_area"  width="20%">
			</td>
			<td colspan="3">
				<table width="100%" style="border: 2px solid green;">
					<tr valign="top">
						<td width="20%">
							<div  id="user7_card_receive_area" style="background-color:#FE4634;">
							</div>
						</td>
						<td width="20%">
							<div  id="user6_card_receive_area" style="background-color:#FE4634;">
							</div>
						</td>
						<td width="20%">
							<div  id="user5_card_receive_area" style="background-color:#FE4634;">
							</div>
						</td>
						<td width="20%">
							<div  id="user4_card_receive_area" style="background-color:#FE4634;">
							</div>
						</td>
						<td width="20%">
							<div  id="user3_card_receive_area"  style="background-color:#FE4634;">
							</div>
						</td>
					</tr>
					<tr>
						<td width="20%">
							<div  id="user8_card_receive_area" style="background-color:#FE4634;">
							</div>
						</td>
						<td colspan="3">
							<!-- 
							<div id="gameLog" style="height:100px; background-color:#363432;overflow-y:scroll; display:block;border: 1px solid black;color:green;">
							</div>
							-->
							<!--
							<div style="height: 60px;background-color:#00CCCC">Three Powers
							</div>
							-->
						</td>
						<td width="20%">
							<div  id="user2_card_receive_area"  style="background-color:#FE4634;">
							</div>
						</td>
					</tr>
					<tr valign="bottom">
						<td width="20%">
						</td>
						<td colspan="3">
							<div  id="user1_card_receive_area" style="background-color:#FE4634;">
							</div>
						</td>
						<td width="20%">
						</td>
					</tr>
				</table>
			</td>
			<td id="user2_area"  width="20%">
			</td>
		</tr>
		<tr>
			<td  width="20%">	
				<div id="receive_message_area"></div>
				<div id="timer_area"></div>
			</td>
			<td id="user1"  colspan="3">
				<div id="user_message"></div>
				<table id="user1_card_area" width="100%" border="1" cellpadding="2" style="border: 2px solid white; -moz-border-radius: 10px;background-color: #363432">
					<tr>
						<td style="border: 0px;-moz-border-radius-topleft:10px;-moz-border-radius-bottomleft:10px">
							<div id="card_hp_arm_area">
								<table width="100%" cellpadding="0" cellspacing="0">
									<tbody>
									<tr>
										<td>
											<div id="arm_card" style="width:100%;float:left;-moz-border-radius-topleft:10px;">
												<div id="arm_0" class="currentArmClass">
												</div>
												<div id="arm_1" class="currentArmClass">
												</div>
												<div id="arm_2" class="currentArmClass">
												</div>
												<div id="arm_3" class="currentArmClass">
												</div>
												<div id="arm_4" class="currentArmClass">
												</div>
											</div >
												
											<div style="width:48%;float:right;">
											
											</div>
										</td>
									</tr>
									<tr>
										<td>
											<div id="HP_card" style="float:left;background-color: white;width: 100%;">
												<div id="hp_1" class="hpClass" style="background-color:#FF0000">
												</div>
												<div id="hp_2" class="hpClass" style="background-color:#CC9900">
												</div>
												<div id="hp_3" class="hpClass" style="background-color:#99CC00">
												</div>
												<div id="hp_4" class="hpClass" style="background-color:#66CC00">
												</div>
												<div id="hp_5" class="hpClass" style="background:#009900">
												</div>
											</div>
										</td>
									</tr>
									<tr>
										<td>
											<div id="user1_main_card" style="border: solid 0px;width:100%;height:60px;float:left;">
											</div>
											
										</td>
									</tr>
									</tbody>
								</table>
							</div>
						</td>
						<td width="15%" align="right" style="border: 0px white; -moz-border-style: 3px outset;">
							<div style="border: solid 1px white; ">
								<table width="100%" cellpadding="0">
									<tbody>
									<tr>
										<td align="center">
											<span id="user1_player_name"></span>
											
										</td>
									</tr>
									<tr>
										<td align="center">
											<span id="user1_role_name"></span>
										</td>
									</tr>
									<tr>
										<td align="center">
											<span id="user1_character_name" title="this is description"></span>
										</td>
									</tr>
									<tr>
										<td align="center">
											<div style="float: left;">
												<input type="hidden" value="OK" hpcount="5" onclick="player.okCard()"/>
											</div>
											<div style="float: right;">
												<input type="hidden" value="Cancel" hpcount="5" onclick="player.cancelCard()"/>
											</div>
										</td>
									</tr>
									<!-- 
									<tr>
										<td align="center">
											<input type="button" value="Cancel" hpcount="5" onclick="player.cancelCard()"/>
										</td>
									</tr>
									-->
									</tbody>
								</table>
							</div>
							<div  style="border: solid 1px;display: none;">
							<table width="100%"><tbody><tr><td><div id="server_data_version"></div></td><td align="center"><div id="policy_button"></div></td><td><div id="send_data_version"></div></td></tr></tbody></table>
							</div>
						</td>
					</tr>
				</table>
			</td>
			<td  width="20%">
				<div id="deskFrameUserlist" style="width:100%;background-color:green">
				<!--<span style="font-size:15px;color:blue">aaaa</span>
				<span >ccc</span>
				<span>wwww</span>
				<span>aaaa</span>
				<span>ccc</span>
				<span>wwww</span>-->
				</div>
			</td>
		</tr>
	</table>
	<table>
		<tr>
			<td>
				<div id="div_room_get_role" style="float: left">
					<input type="button" id="get_role"  value="Get Role" disabled onclick="componentExecFunction('room_instance','getRoleCards',null)"/>
				</div>
				<div id="div_room_get_character" style="float: left">
					<input type="button" id="get_character"  value="Get Character" disabled onclick="componentExecFunction('room_instance','getCharacter',null)"/>
				</div>
				<div id="div_room_game_start" style="float: left">
					<input type="button" id="btn_game_start"  value="Start" disabled onclick="componentExecFunction('room_instance','startGame',null)"/>
				</div>
				<div id="div_pass_control" style="float: left">
					<input type="button" id="finish_play"  value="Pass" disabled onclick="player.finishPlay()"/>
				</div>	
					
			</td>
		</tr>
	</table>
	<script language="javascript" type="text/javascript">
		//conf.player = player;
		//room.init(conf);
		//room.loadUser();
		//room.initRoom();
		//room.setUserList(null);
	</script>
 </BODY>
</HTML>
